<template>
  <div class="tempHead">
    <div class="main">
      <img :src="iconPath" v-if="iconPath !== ''" />
      <svg-icon v-if="svgPath !== ''" :icon-class="svgPath" :class-name="svgClassName" />
      <h4 style="margin: 0 15px;font-weight: bold;font-size: 16px;">{{ title }}</h4>
      <span v-if="data != ''">{{ data }}</span>
    </div>
    <div class="right">
      <Btn v-if="btn2 == '证书下载'" :text="btn2" type="border-1" @dian="$emit('DownloadCertificate')" />
      <Btn v-if="btn == '绑定设备'" :text="btn" type="border-1" @dian="$emit('device')" />
    </div>
  </div>
</template>

<script>
import Btn from "@/views/components/button/index"
export default {
  name: "CustomHead",
  components: { Btn },
  props: {
    iconPath: {
      type: String,
      required: false,
      default: "",
    },
    svgClassName: {
      type: String,
      required: false,
      default: "",
    },
    svgPath: {
      type: String,
      required: false,
      default: "",
    },
    title: {
      type: String,
      required: true,
    },
    data: {
      type: String,
      required: false,
      default: "",
    },
    btn: {
      type: String,
      required: false,
      default: "按钮",
    },
    btn2: {
      type: String,
      required: false,
      default: "按钮",
    },
  },
  data() {
    return {
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.tempHead {
  width: 100%;
  height: 40px;
  //margin-bottom: 20px;
  background-color: white;
  display: flex;
  align-items: center;
  img {
    width: 20px;
    //height: 20px;
  }
  .main{
    // width: 300px;
    display: flex;
    align-items: center;
  }
  .right{
    flex: 1;
    text-align: right;
  }
}
</style>
